<template>
  <div class="board">
    <BreadCrumb @change="timeChange" />
    <!-- 订单 -->
    <section class="base-page-container board__order">
      <section class="board__title">订单</section>
      <BaseRadioGroupLabelItem
        v-model:select="deviceSelect"
        label="设备"
        :options="deviceOptions"
        @change="deviceChange"
      />
      <BaseRadioGroupLabelItem
        v-model:select="channelSelect"
        label="渠道"
        :options="channelOptions"
        @change="channelChange"
      />
      <CheckBoxCard
        v-model:select="selectCheckbox"
        :options="channelCheckOptions"
        @change="checkBoxChange"
      />
      <p class="board__sales">
        <span class="board__sales__label">最高销售额为<strong class="board__sales__value">¥2,923.16</strong></span>
        <span class="board__sales__label">最低销售额为<strong class="board__sales__value">¥0.61</strong></span>
      </p>
      <section class="board__chart">
        <KLineChart
          width="100%"
          height="236px"
          x-type="date"
          y-type="number"
          :x-data="lineChartXData"
          :y-data="lineChartYData"
          :options="{ showSeriesName: true, seriesName: '销售额' }"
        />
      </section>
    </section>
    <!-- 流量 -->
    <section class="base-page-container board__order">
      <section class="board__title">流量</section>
      <BaseRadioGroupLabelItem
        v-model:select="deviceSelect"
        label="设备"
        :options="deviceOptions"
        @change="deviceChange"
      />
      <section class="board__checkbox">
        <CheckBoxCard
          width="calc(20% - 16px)"
          :is-read-only="true"
          :options="flowOptions"
        />
      </section>
      <div class="board__sales base-clearfix">
        <span class="board__sales__label">最高访客数为<strong class="board__sales__value">2000</strong></span>
        <span>最低访客数为<strong class="board__sales__value">100</strong></span>
        <el-radio-group v-model="flowTarget" class="base-fr" @change="flowTargetChange">
          <el-radio-button v-for="item in flowTargetOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <section class="board__chart">
        <KLineChart
          width="100%"
          height="236px"
          x-type="date"
          y-type="number"
          :x-data="lineChartXData"
          :y-data="lineChartYData"
          :options="{ showSeriesName: true, seriesName: '销售额' }"
        />
      </section>
    </section>
    <!-- 增长 -->
    <section class="base-page-container board__order">
      <section class="board__title">增长</section>
      <BaseRadioGroupLabelItem
        v-model:select="deviceSelect"
        label="设备"
        :options="deviceOptions"
        @change="deviceChange"
      />
      <p class="board__sales">
        <span class="board__sales__label">最高新增用户为<strong class="board__sales__value">5656</strong></span>
        <span class="board__sales__label">最低新增用户为<strong class="board__sales__value">56665</strong></span>
        <span class="board__sales__label">所选区间新增用户总数为<strong class="board__sales__value">56665</strong></span>
        <span class="board__sales__label">环比<strong class="board__sales__radio">56665</strong></span>
      </p>
      <section class="board__chart">
        <div class="board__chart__content">
          <KLineChart
            width="100%"
            height="236px"
            x-type="date"
            y-type="number"
            :x-data="lineChartXData"
            :y-data="lineChartYData"
            :options="{ showSeriesName: true, seriesName: '销售额' }"
          />
        </div>
        <CardTab
          v-model:active-tab="increaseActiveTab"
          class="board__chart__tab"
          :options="cardTabOptions"
          @handleClick="increaseTabClick"
        ></CardTab>
      </section>
    </section>
    <!-- 用户画像 -->
    <section class="base-page-container board__order">
      <section class="board__title">用户画像</section>
      <BaseRadioGroupLabelItem
        v-model:select="userSelect"
        label="用户类别"
        :options="userLabelOptions"
        @change="userChange"
      />
      <div class="board__area base-clearfix">
        <section class="board__title">用户地域分布</section>
        <el-radio-group v-model="areaTarget" class="base-fr" @change="areaTargetChange">
          <el-radio-button v-for="item in areaTargetOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <section class="board__area__chart">
        <div class="board__map">
          <KCharts width="100%" height="290px" :option="chinaOption" />
        </div>
        <div class="board__progress">
          <KProgress
            v-if="progressData.length > 0"
            width="100%"
            height="230px"
            width-line="568px"
            :progress-data="progressData"
          />
        </div>
      </section>
      <!-- 终端设备 -->
      <div class="board__terminal">
        <section class="board__title">终端设备</section>
        <KBarChart
          width="100%"
          height="206px"
          x-type="string"
          y-type="percent"
          :x-data="barChartXData"
          :y-data="barChartYData"
          :options="{ showSeriesName: true, seriesName: '占比', showValue: true}"
          :tooltip="terminalBarTooltip"
        />
      </div>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { chinaMap } from '@/hooks/charts/china-map-chart';
import { BaseRadioGroupLabelItem } from '@/components/base-form';
import { KLineChart, KBarChart } from '@/components/k-charts';
import { KProgress } from '@/components/k-progress';
import { deviceOptions, channelOptions, channelCheckOptions, flowOptions, flowTargetOptions,
  cardTabOptions, progressData, lineChartXData, lineChartYData, barChartXData, barChartYData, areaTargetOptions, terminalBarTooltip,
  userLabelOptions } from './data.ts';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import CardTab from './components/card-tab/index.vue';
import CheckBoxCard from './components/card-check/index.vue';
defineOptions({
  name: 'KgjBoard'
});
const deviceSelect = ref('0');
const channelSelect = ref('0');
const userSelect = ref('0');

// 单选
const deviceChange = (val: string | number | boolean) => {
  console.log(val);
};
const channelChange = (val: string | number | boolean) => {
  console.log(val);
};
const userChange = (val: string | number | boolean) => {
  console.log(val);
};
const timeChange = (val: any) => {
  console.log(val, 'timeChange');
};
// 多选
const selectCheckbox= ref<string[]>(['1']);

// 流量
const flowTarget = ref('1');
const flowTargetChange = (value: string | number | boolean) => {
  console.log(value);
};
// 增长
const increaseActiveTab = ref('users');
const increaseTabClick = (item: Record<string, any>) => {
  console.log(item);
};

// 地图
const chinaOption: any = ref(chinaMap([]));
const areaTarget = ref(1);

const areaTargetChange = (value: string | number | boolean) => {
  console.log(value);
};
const checkBoxChange = (val: string[] | number[]) => {
  console.log(val);
};
</script>
<style lang="scss" scoped>
.board {
  &__title {
    height: 24px;
    margin-bottom: $baseMarginBottom;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #303133;
  }

  &__sales {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    color: #909399;
    letter-spacing: -.01px;

    &__label {
      padding-right: 24px;
    }

    &__value {
      padding-left: 2px;
      font-weight: 500;
      color: #606266;
    }

    &__radio {
      padding-left: 4px;
      font-size: 12px;
      font-style: normal;
      font-weight: 500;
      color: #F56C6C;
      letter-spacing: -.01px;

      &::after {
        display: inline-block;
        margin: -10px 0 0 6px;
        font-size: 14px;
        vertical-align: middle;
        content: '';
        border-color: transparent transparent #F56C6C;
        border-style: solid;
        border-width: 6px 4px;
      }

      &--down {
        color: #67C23A;

        &::after {
          margin-top: 6px;
          border-color: #67C23A transparent transparent;
        }
      }
    }
  }

  &__chart {
    display: flex;
    align-items: center;
    height: 236px;
    margin-top: 16px;

    &__content {
      flex: 1;
    }

    &__tab {
      flex-shrink: 0;
      width: 220px;
      margin-left: 24px;
    }
  }

  &__terminal {
    margin-top: 24px;
  }

  &__area {
    &__chart {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 16px;
    }
  }

  &__map {
    flex: 1;
  }

  &__progress {
    flex-shrink: 0;
    width: 568px;
    margin-left: 24px;
  }
}
</style>
